﻿@page
@{
    ViewData["Title"] = "OrganizeModify";
    Layout = "~/Pages/Admin/_Layout.cshtml";
}
<style>

    .organize-tree {
        position: absolute;
        background-color: #fff;
        padding: 5px 25px;
        z-index: 1000;
        box-shadow: 0 0 24px rgba(0,0,0,.18);
        opacity: 0;
        height: 0;
        display: none;
    }

        .organize-tree.active {
            display: block;
            opacity: 1;
            height: auto;
            max-height: 500px;
            overflow: auto;
            transition: all .5s;
        }    
</style>
<div id="app">
    <form class="layui-form form-cus" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">所属部门</label>
            <div class="layui-input-block">
                <input type="text" name="ParentName" id="ParentName" v-model="m.parentName"  autocomplete="off" placeholder="请选择所属部门" class="layui-input">
                <div class="organize-tree">
                    <div id="tree" class="layui-tree-cus"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input type="text" name="Name" lay-verify="required" v-model="m.name"  lay-verType="tips" autocomplete="off"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="Sort" lay-verify="required" v-model="m.sort" lay-verType="tips" autocomplete="off"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-cur-submit">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submit" id="submit"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>提交</button>
                <button type="button" class="layui-btn layui-btn-primary btn-open-close">取消</button>
            </div>
        </div>

    </form>
</div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                m: {parentName:'' }
            }
        });
       layui.use(['layer', 'jquery', 'common', 'form', 'tree'], function () {
        var form = layui.form, $ = layui.$, os = layui.common,tree = layui.tree;
           var index = parent.layer.getFrameIndex(window.name);

           var oc = {
               init() {

                   if (os.getUrlParam('id') != null) {

                       //查询用户信息
                       os.ajax('api/admin/sysorganize/get',
                           { id: os.getUrlParam('id') },
                           function (res) {

                               if (res.code == 1) {
                                   vm.m = res.data;

                               } else {
                                   os.error(res.msg);
                               }

                           }, 'get');
                   }
               }
           }
           oc.init();



        //监听提交
         form.on('submit(submit)', function (data) {
            $('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
            var urls ="api/admin/sysorganize/add";
            if(os.getUrlParam('id') != null)
            {
                urls ="api/admin/sysorganize/update";
            }
            os.ajax(urls, vm.m, function (res) {
                $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                if (res.code === 1) {
                    parent.layer.close(index);
                    //刷新父页面的数据
                    $('button[data-type="reload"]', window.parent.document).click();
                } else {
                    os.error(res.message);
                }
            });
            return false;
        });
        $(".btn-open-close").on('click', function () {
            parent.layer.close(index);
        });

           os.ajax('api/admin/sysorganize/gettree/', {}, function (res) {
               var node = {
                   id: null,
                   title: '父节点',
                   spread: true
               };
               res.data.splice(0, 0, node);
              tree.render({
                elem: '#tree'
                , data: res.data
                , onlyIconControl: true
                , click: function (obj) {
                    id = obj.data.id;
                    vm.m.parentId = obj.data.id;
                    vm.m.parentName = obj.data.title;
                    $(".organize-tree").removeClass('active');
                }
            });
        },'get');
        $("#ParentName").click(function () {
            $(".organize-tree").addClass('active');
        });
        $(".organize-tree").mouseleave(function () {
            $(".organize-tree").removeClass('active');
        });

    });
</script>


